<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<span>{{name}}</span>
		<div id="myApp">
				<!-- v-model 用于表单元素 文本框，单选框，多选框，下拉框，文本域 -->
				<!-- 作用范围：用于表单属性 -->
				<input type="text" v-model="name" >
				
				<span>{{name}}</span>
				
				<!-- 作用范围：用于非表单元素的两个标签之间 -->
				<!-- {{数据层的建名}} 用于非表单元素 -->
				<span>{{userInfo.name}}</span>
				
		</div>
		
	</body>
	<script>
		 //创建vue对象
		  new Vue({
			  el:"#myApp",//绑定视图层元素view
			  data:{//model 数据层
				  name:"hello",
				  sex:"男",
				  userInfo:{
					  userName:"admin",
					  userPwd:""
				  }
			  }
		  })
			
	</script>
	
</html>
